<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>18_宏队列与微队列</title>
</head>

<body>
  <script>
    /* 
      宏队列: 【宏任务1, 宏任务2, ...】
      微队列: 【微任务1, 微任务2, ...】
      规则: 每次执行宏队列里的一个任务之前, 先看微队列里是否有待执行的微任务
          1. 如果有, 先执行微任务
          2. 如果没有, 按照宏任务里任务的顺序, 依次执行
    */

    // 代码一
      // setTimeout(() => {
      //   console.log('a')
      // }, 0);

      // Promise.resolve().then(
      //   value => console.log('b')
      // );

      // Promise.resolve().then(
      //   value => console.log('c')
      // );

      // console.log('d');

      /**
       * 同步执行: d
       * 宏: 【a】
       * 微: 【b、c】
       * -----------> 
       * 执行微任务: b、c
       * 执行宏任务: a
      */




    // 代码二
      // setTimeout(() => {
      //   console.log('timeout1');
      // });

      // setTimeout(() => {
      //   console.log('timeout2');
      // });

      // Promise.resolve(1).then(
      //   value => console.log('成功1', value)
      // );

      // Promise.resolve(2).then(
      //   value => console.log('成功2', value)
      // );

      /**
       * 宏: 【timeout1、timeout2】
       * 微: 【成功1、成功2】
       * -----------> 
       * 执行微任务: 成功1、成功2
       * 执行宏任务: timeout1、timeout2
      */


    // 代码三
      // setTimeout(() => {
      //   console.log('timeout1')
      //   Promise.resolve(5).then(
      //     value => console.log('成功了5')
      //   )
      // });

      // setTimeout(() => {
      //   console.log('timeout2');
      // });

      // Promise.resolve(3).then(
      //   value => console.log('成功了3')
      // );

      // Promise.resolve(4).then(
      //   value => console.log('成功了4')
      // );

      /**
       * 宏: 【timeout1、timeout2】
       * 微: 【成功3、成功4】
       * -----------> 
       * 执行微任务: 成功3、成功4
       * 执行宏任务: timeout1
       * ====================> 
       * 宏: 【timeout2】
       * 微: 【成功5】
       * 执行微任务: 成功5
       * 执行宏任务: timeout2
      */

  </script>
</body>

</html>
